import React, {useState} from "react";
import {createStyles} from "antd-style";
import {useLocation, useNavigate} from "react-router";
import useAppState from "@/store/AppState.ts";
import {
    ApartmentOutlined,
    AppstoreOutlined,
    FolderOpenOutlined,
    MenuOutlined,
    SettingOutlined,
} from "@ant-design/icons";
import HeaderButton from "@/pages/HomePage/HeaderButton.tsx";
import {PageList} from "@/AppRouter.tsx";
import {BreakPoints} from "@/common/profiles.ts";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-content: center;
        `,
        shrinkButtons: css`
            transition: all .2s;
            display: flex;
            position: absolute;
            text-wrap: nowrap;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            overflow: clip;
            background-color: ${token.colorPrimaryBg};
        `,
    }
})

/**
 * 左侧菜单
 */
const HeaderMenu: React.FC = () => {
    const styles = useStyles().styles;
    const navigate = useNavigate();
    const {width} = useAppState();
    const [shrinkButtonShow, setShrinkButtonShow] = useState(false)
    const location = useLocation()

    const buttons = (
        <>
            <HeaderButton
                onClick={(evt) => {
                    evt.preventDefault()
                    evt.stopPropagation()
                    navigate(PageList.FileDive)
                }}
                active={PageList.FileDive == location.pathname}
                content="文件"
                icon={<FolderOpenOutlined/>}
            />
            <HeaderButton
                onClick={(evt) => {
                    evt.preventDefault()
                    evt.stopPropagation()
                    navigate(PageList.Content)
                }}
                active={PageList.Content == location.pathname}
                content="容器"
                icon={<AppstoreOutlined/>}
            />
            <HeaderButton
                onClick={(evt) => {
                    evt.preventDefault()
                    evt.stopPropagation()
                    navigate(PageList.Manage)
                }}
                active={PageList.Manage == location.pathname}
                content="管理"
                icon={<ApartmentOutlined/>}
            />
            <HeaderButton
                onClick={(evt) => {
                    evt.preventDefault()
                    evt.stopPropagation()
                    navigate(PageList.Settings)
                }}
                active={PageList.Settings == location.pathname}
                content="设置"
                icon={<SettingOutlined/>}
            />
        </>
    )

    if (width < BreakPoints.middle) {
        return (
            <div className={styles.container}>
                <HeaderButton
                    onClick={() => {
                        setShrinkButtonShow(true)
                    }}
                    icon={<MenuOutlined/>}
                    content={"菜单"}
                />
                <div className={styles.shrinkButtons}
                     onMouseLeave={() => {
                         setShrinkButtonShow(false)
                     }}
                     onTouchEnd={() => {
                         setShrinkButtonShow(false)
                     }}
                     style={{width: shrinkButtonShow ? "100%" : "0%"}}
                >
                    {buttons}
                </div>
            </div>
        )
    }

    return (
        <div className={styles.container}>
            {buttons}
        </div>
    )
}

export default HeaderMenu
